<template>
	<view class="container">
		<view class="header">
			<bar></bar>
			<!-- <bar></bar>  -->
		</view>
		<view class="gui-margin">
			<!-- 轮播图 -->
			<view class="" style="margin-top: -180rpx;">
				<gui-swiper :swiperItems="swiperItems" imgMode="scaleToFill" :width="750" :height="330"></gui-swiper>
			</view>


			<!-- 滚动公告 -->
			<view class=" gui-border-radius-large " style="margin: 30rpx 0;">
				<view class="gui-bg-white  gui-margin-top">
					<gui-speaker :items="speakerMsgs" @change="chang1">
						<text slot="icon" class="gui-block-text gui-icons demo-icon gui-color-blue"
							style="margin:0 15rpx;color: blue;">&#xe656;</text>
					</gui-speaker>
				</view>
			</view>

			<!-- 信息展示 -->
			<view class="personnel-info">
				<view v-if="isAddress" class="info-demo">
					<view class="left-box" @click="gotoAddress('0')">
						<image src="/static/images/Group48097509@3x.png" mode=""></image>
						<view class="people-info">
							<text>寄件人信息</text>
							<text>请输入寄件人信息</text>
						</view>
					</view>
					<view class="address" @click="goPage('/pages/AddressBooks/AddressBooks?useflg=0')">
						地址簿
					</view>
				</view>
				<view v-if="!isAddress" class="info-demo">
					<view class="left-box" @click="gotoAddress('0')">
						<image src="/static/images/Group48097509@3x.png" mode=""></image>
						<view class="people-info">
							<view class="gui-flex gui-justify-content-start gui-align-items-center gui-color-black">
								<view style="font-size: 28rpx;margin-right: 30rpx;">{{sendInfo.placeOrderName}}</view>
								<view> {{sendInfo.placePhone}}</view>
							</view>
							<text>{{sendInfo.address}}</text>
						</view>
					</view>
					<view class="address" @click="goPage('/pages/AddressBooks/AddressBooks?useflg=0')">
						地址簿
					</view>
				</view>
				<view v-if="isAddress1" class="info-demo">
					<view class="left-box" @click="gotoAddress('1')">
						<image src="/static/images/Group48097518@3x.png" mode=""></image>
						<view class="people-info">
							<text>收件人信息</text>
							<text>请输入收件人信息</text>
						</view>
					</view>
					<view class="address" @click="goPage('/pages/AddressBooks/AddressBooks?useflg=1')">
						地址簿
					</view>
				</view>
				<view v-if="!isAddress1" class="info-demo">
					<view class="left-box" @click="gotoAddress('1')">
						<image src="/static/images/Group48097518@3x.png" mode=""></image>
						<view class="people-info">
							<view class="gui-flex gui-justify-content-start gui-align-items-center gui-color-black">
								<view style="font-size: 28rpx;margin-right: 30rpx;">{{reciveInfo.sendingOrderName}}
								</view>
								<view> {{reciveInfo.sendingPhone}}</view>
							</view>
							<text>{{reciveInfo.address}}</text>
						</view>
					</view>
					<view class="address" @click="goPage('/pages/AddressBooks/AddressBooks?useflg=1')">
						地址簿
					</view>
				</view>
			</view>

			<view class="server-info">
				<view class="server-demo">
					<text class="text">货物信息</text>
					<view class="right-info">
						<picker @change="bindGoodsPickerChange" :range="goodsPickerArray">
							<view class="uni-input" style="opacity: 0;"></view>
						</picker>
						<text v-if="goodsPattern">{{goodsPattern}}</text>
						<text v-else>请选择</text>
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="server-demo">
					<text class="text">选择上门日期</text>
					<view class="right-info">
						<view class="gui-bg-white">
							<gui-datetime @confirm="confirm2" :value="form.selectDate" :isTime="false">
								<text style="color: #333;font-size: 24rpx;">
									{{form.selectDate?form.selectDate:'请选择'}}</text>
								<text class="gui-color-gray  gui-text gui-icons" style="margin-right: 0;">&#xe601;</text>
							</gui-datetime>

						</view>
					</view>
				</view>
				<view class="server-demo">
					<text class="text">期望上门时间</text>
					<view class="right-info">
						<picker @change="bindCalenPickerChange" :range="calenPickerArray">
							<view class="uni-input" style="opacity: 0;"></view>
						</picker>
						<text v-if="calenPattern">{{form.appointmentTime}}</text>
						<text v-else>请预约上门时间</text>
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="server-demo">
					<text class="text">付款方式</text>
					<view class="right-info">
						<picker @change="bindOrderPickerChange" :range="orderPickerArray">
							<view class="uni-input" style="opacity: 0;"></view>
						</picker>
						<text v-if="orderPattern">{{form.payType}}</text>
						<text v-else>请选择付款方式</text>
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="left-footer">
				运费：<text>￥{{form.payAmount?form.payAmount:0}}</text>
			</view>
			<view class="right-footer" @click="payOrder">
				立即下单
			</view>
		</view>

	</view>
</template>

<script>
	import graceJS from '@/Grace6/js/grace.js';
	export default {
		data() {
			return {
				// 基础路径
				baseUrl: uni.gRequest.file,
				searchValue: '',
				// orderPickerIndex: 0,
				orderPickerArray: ['在线付款', '货到付款'],
				orderPattern: false,
				calenPickerArray: ['06:00~07:00', '07:00~08:00', '08:00~09:00', '08:00~09:00', '09:00~10:00',
					'10:00~12:00',
					'12:00~13:00', '13:00~14:00', '14:00~15:00', '15:00~16:00', '16:00~17:00', '17:00~18:00',
					'18:00~19:00',
					'19:00~20:00', '20:00~21:00'
				],
				calenPattern: '',
				goodsPickerArray: [],
				goodsPattern: '',
				isAddress: true, //信息是否填写
				isAddress1: true,
				swiperItems: [],
				// 滚动公告数据
				speakerMsgs: [],
				sendInfo: {
					address: ''
				},
				reciveInfo: {
					address: ''
				},
				obj: [],
				form: {
					appointmentTime: '',
					payAmount: '',
					goodsId: '',
					payType: '',
					selectDate: ''
				}
			}
		},
		onLoad() {
			let user = uni.gRequest.checkLogin()
			this.getBanner()
			this.getAdvertisement()
			this.getGoodsList()
			// 获取默认地址
			this.getDefault()
		},
		onShow() {
			
			this.sendInfo = uni.getStorageSync('sendInfo')

			this.reciveInfo = uni.getStorageSync('reciveInfo')

			if (this.sendInfo) {
				if (this.sendInfo.value2) {
					this.sendInfo.value2 = this.sendInfo.value2.replace(/,/g, "")
					this.sendInfo.address = this.sendInfo.value2 + this.sendInfo.endAddress
				}

				this.isAddress = false
			}
			if (this.reciveInfo) {
				if (this.reciveInfo.value2) {
					this.reciveInfo.value2 = this.reciveInfo.value2.replace(/,/g, "")
					this.reciveInfo.address = this.reciveInfo.value2 + this.reciveInfo.startAddress
				}
				this.isAddress1 = false
			}
			if (this.sendInfo && this.reciveInfo) {
				console.log('数据填写完整');

				let self = this
				// console.log(self.sendInfo.value2 + self.sendInfo.endAddress, self.reciveInfo.value2 + self.reciveInfo.startAddress);
				uni.gRequest.get('map/location', {
					startAddress: self.sendInfo.address,
					endAddress: self.reciveInfo.address,
				}).then(res => {
					self.form.payAmount = res.msg
				})
			}
		},
		methods: {
			// 获取默认地址
			getDefault(){
				let self = this
				uni.gRequest.get('address/myAddress').then(res => {
					let defaultArr=[]
					res.data.forEach(item=>{
						if(item.isDefault=='1'){
							defaultArr.push(item)
						}
					})
					let defaultList= {
						placeOrderName:defaultArr[0].userName,
						placePhone:defaultArr[0].userPhone,
						address:defaultArr[0].address
					}
					// console.log(defaultArr);
					uni.setStorageSync('sendInfo',defaultList)
					// self.sendInfo=defaultList
				})
			},
			// 订单生成接口
			payOrder() {
				if (!this.sendInfo.placeOrderName) {
					uni.showToast({
						title: '寄件人姓名不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.sendInfo.placePhone) {
					uni.showToast({
						title: '寄件人手机号码不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.sendInfo.address) {
					uni.showToast({
						title: '寄件人地址不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.reciveInfo.sendingOrderName) {
					uni.showToast({
						title: '收件人姓名不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.reciveInfo.sendingPhone) {
					uni.showToast({
						title: '收件人手机号码不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.reciveInfo.address) {
					uni.showToast({
						title: '收件人地址不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.form.goodsId) {
					uni.showToast({
						title: '货物信息不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.form.appointmentTime) {
					uni.showToast({
						title: '期望上门时间不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.form.payType) {
					uni.showToast({
						title: '付款方式不能为空',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '请稍等'
				})
				this.sendInfo.endAddress = this.sendInfo.address
				this.reciveInfo.startAddress = this.reciveInfo.address
				let newForm = {
					...this.sendInfo,
					...this.reciveInfo,
					...this.form
				}
				let self = this

				uni.gRequest.post('order/fillOrder', JSON.stringify(newForm)).then(res => {
					// 如果是在线付款，调用微信支付
					if (newForm.payType == "在线付款") {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.paySign,
							success: function(result) {
								uni.hideLoading()
								// 下单成功接口
								uni.gRequest.get('order/paySuccess', {
									orderNo: res.data.tradeNo
								}).then(rt => {
									uni.removeStorageSync('sendInfo')
									uni.removeStorageSync('reciveInfo')
									self.isAddress=true
									self.isAddress1=true
								
									self.form.appointmentTime=''
									self.form.payAmount=''
									self.form.goodsId=''
									self.form.payType=''
									self.form.selectDate=''
									// 保存订单详细信息
									uni.navigateTo({
										url: '/pages/PaymentOrder/PaymentOrder?type=在线付款'
									})
									
								})
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								})
							}
						});
					} else {
						uni.hideLoading()
						uni.removeStorageSync('sendInfo')
						uni.removeStorageSync('reciveInfo')
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						self.isAddress=true
						self.isAddress1=true
						self.form.appointmentTime=''
						self.form.payAmount=''
						self.form.goodsId=''
						self.form.payType=''
						self.form.selectDate=''
						// 保存订单详细信息
						uni.navigateTo({
							url: '/pages/PaymentOrder/PaymentOrder?type=货到付款'
						})
					}
					// else{
					// 	// 下单成功接口
					// 	uni.gRequest.get('order/paySuccess', {
					// 		orderNo: res.data.tradeNo
					// 	}).then(rt => {
					// 		uni.hideLoading()
					// 		uni.removeStorageSync('sendInfo')
					// 		uni.removeStorageSync('reciveInfo')
					// 		uni.showToast({
					// 			title:rt.msg,
					// 			icon:'none'
					// 		})
					// 		// 保存订单详细信息
					// 		uni.navigateTo({
					// 			url:'pages/PaymentOrder/PaymentOrder'
					// 		})
					// 	})
					// }
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 获取货物列表
			getGoodsList() {
				let self = this;
				uni.gRequest.get('goods/list').then(res => {
					let arr = []
					res.rows.map(item => {
						arr.push(item.goodsType)
					})
					self.goodsPickerArray = arr

					this.obj = res.rows.map(item => {
						return {
							name: item.goodsType,
							id: item.id
						}

					})
				})
			},
			// 选择日期
			confirm2: function(res) {
				this.form.selectDate = res[0] + '-' + res[1] + '-' + res[2];
			},
			// 支付方式
			bindOrderPickerChange(e) {
				this.form.payType = this.orderPickerArray[e.detail.value]
				this.orderPattern = true
				console.log(this.form.payType);
			},
			// 上门时间
			bindCalenPickerChange(e) {
				this.form.appointmentTime = this.calenPickerArray[e.detail.value]
				this.calenPattern = true
			},
			// 获取类型id
			bindGoodsPickerChange(e) {
				this.goodsPattern = this.goodsPickerArray[e.detail.value]
				this.form.goodsId = this.obj[e.detail.value].id
			},
			gotoAddress(flg) {
				uni.navigateTo({
					url: "/pages/userAddress/userAddress?flg=" + flg
				})
			},
			search() {},
			// 跳转到发布页
			gotoIssue() {
				// console.log(456);
				uni.switchTab({
					url: "/pages/order/list"
				})
			},
			async initData() {
				const res = await uni.gRequest.get('news/list', {
					type: 3
				})
			},


			goSearch() {
				uni.navigateTo({
					url: '/pages/product/search'
				});
			},
			// 轮播图
			getBanner() {
				var self = this;
				uni.gRequest.get('banner/list', {
					type: 'home_top'
				}).then(res => {
					res.data.forEach(item => {
						self.swiperItems.push({
							img: uni.gRequest.file + item.image
						});
					});
					self.swiperItems = res.data
				})
			},
			// 公告
			getAdvertisement() {
				let self = this
				uni.gRequest.get('fhxmuser/notice').then(res => {
					self.speakerMsgs.push({
						title: res.msg
					})
				})
			},
		}
	};
</script>

<style lang="scss">
	.search {
		width: 80%;
		line-height: 50rpx;
		font-size: 26rpx;
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.container {
		width: 100%;
		padding-bottom: 200rpx;
	}

	.header {
		width: 100%;
		height: 393rpx;
		background: url('../../static/images/Vector29@3x.png') no-repeat left bottom/100%;
	}

	.body {
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.image-box {
		width: 689rpx;
		height: 270rpx;
		// margin: 0 auto;
		// margin-top: -150rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.tip {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 20rpx;
		height: 64rpx;
		background: #FAFCFF;
		color: #347DFD;
		font-size: 24rpx;

		image {
			width: 31rpx;
			height: 31rpx;
			margin-right: 30rpx;
		}
	}

	.server-info {
		width: 100%;
		box-sizing: border-box;
		box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 0 20rpx;

		.server-demo {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
			width: 100%;
			box-sizing: border-box;
			border-bottom: 1rpx #eee solid;
			font-size: 24rpx;
			color: #666666;
			position: relative;



			&:last-child {
				border: none;
			}



			.right-info {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				// position: relative;
				// flex: 1;

				.uni-input {
					position: absolute;
					// height: 47rpx;
					// width: 400rpx;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}

				text {
					margin-right: 20rpx;
				}

				.uni-icons {
					font-size: 24rpx !important;
					margin-right: 0;
				}
			}

		}
	}

	.personnel-info {
		width: 100%;
		box-sizing: border-box;
		box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 0 20rpx;
	}

	.info-demo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 1rpx #eee solid;

		&:last-child {
			border: none;
		}

		.left-box {
			display: flex;
			align-items: center;

			image {
				width: 53rpx;
				height: 63rpx;
			}

			.people-info {
				width: 450rpx;
				margin-left: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 24rpx;
				color: #999999;

				text:first-child {
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					margin-bottom: 8rpx;
				}
			}
		}

		.address {
			font-size: 22rpx;
			color: #999999;

			&::before {
				content: '';
				border-left: 2rpx solid #eee;
				margin-right: 50rpx;

			}
		}
	}

	.footer {
		background-color: white;
		position: fixed;
		bottom: 0;
		height: 130rpx;
		display: flex;
		width: 100%;
		padding: 40rpx;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		border-top: 1rpx #eee solid;

		.left-footer {
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: 36rpx;
				color: #347DFD;
			}
		}

		.right-footer {
			width: 227rpx;
			height: 73rpx;
			background: linear-gradient(270deg, #4EA0FF 0%, #347DFD 100%);
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(12, 101, 255, 0.2);
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
		}
	}
</style>